@model ICollection<CleverCMS.Cms.Data.Entities.CmsSetting>

@section TitleContent
{
    Widgets   
}

<div class="widget green">
    <div class="widget-title">
        <h4><i class="icon-reorder"></i> Widgets</h4>
    </div>
    <div class="widget-body">
        <button class="btn btn-danger" id="DeleteAllButton"><i class="icon-remove icon-white"></i> Delete all selected</button>
        <a class="btn btn-warning" href="@Url.Action("Edit","Settings", new { area = "CleverCms.Admin" })"><i class="icon-plus icon-white"></i> Create</a>
        <div id="SettingsContainer">
        </div>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        $('#SettingsContainer').jtable({
            paging: true,
            pageSize: 12,
            gotoPageArea: 'none',
            pageSizeChangeArea: false,
            sorting: true,
            redirect: true,
            defaultSorting: 'Name ASC',
            selecting: true,
            multiselect: true,
            selectingCheckboxes: true,
            selectOnRowClick: false,
            actions: {
                listAction: '@Url.Action("ListSettings")',
                deleteAction: '@Url.Action("Delete")'
            },
            fields: {
                Id: {
                    key: true,
                    create: false,
                    edit: false,
                    list: true,
                    width: '5%'
                },
                Key: {
                    title: 'Name',
                    width: '90%'
                },
                Edit: {
                    sorting: false,
                    title: 'Edit',
                    width: '1%',
                    display: function (data) {
                        return '<a href="@Url.Action("Edit")/' + data.record.Id + '">Edit</a>';
                    }
                }
            },
            selectionChanged: function () {
                var $selectedRows = $('#SettingsContainer').jtable('selectedRows');

                $('#SelectedRowList').empty();
                if ($selectedRows.length > 0) {
                    $selectedRows.each(function () {
                        var record = $(this).data('record');
                        $('#SelectedRowList').append(
                            '<b>StudentId</b>: ' + record.StudentId +
                            '<br /><b>Name</b>:' + record.Name + '<br /><br />'
                            );
                    });
                } else {
                    $('#SelectedRowList').append('No row selected! Select rows to see here...');
                }
            }
        });
        $('#SettingsContainer').jtable('load');

        $('#DeleteAllButton').button().click(function () {
            var $selectedRows = $('#SettingsContainer').jtable('selectedRows');
            $('#SettingsContainer').jtable('deleteRows', $selectedRows);
        });
    });
</script>

